<template>
  <div style="height: 100%">
    <SongsList :searchList="list" />
  </div>
</template>

<script setup>
import { useRoute } from "vue-router"
import SongsList from "../SongsList/SongsList.vue"
import { getPlaylistDetail } from "@/api"
import { onMounted, ref } from "vue"
import { useListStore } from "../../store/list"
const listStore = useListStore()
const route = useRoute()
let newList = ref({})

const list = ref([])
onMounted(async () => {
  const id = route.params.id
  const responseDetail = await getPlaylistDetail(id)
  list.value = responseDetail.data.playlist.tracks
  // console.log(list.value)
  newList.value = list.value.map((item) => {
    let duration = item.duration || item.dt
    let date = new Date(duration)
    let m = date.getMinutes()
    let s = date.getSeconds()
    let time = `${m.toString().padStart(2, "0")}:${s
      .toString()
      .padStart(2, "0")}`
    return {
      album: item.album?.name || item.al?.name,
      duration: time,
      id: item.id,
      image: item.album?.artist.img1v1Url || item.al?.picUrl,
      name: item.name,
      singer: item.artists?.[0].name || item.ar?.[0]?.name,
    }
  })
  listStore.clearPlayList()
  listStore.setPlayList(newList.value)
  //   console.log(newList.value)
})
</script>

<style scoped></style>
